<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片视图区域 -->
        <el-card>         
            <el-row :gutter="20">
                 <el-col :span="8">
                    <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="userList">
                        <el-button slot="append" icon="el-icon-search" @click="userList"></el-button>
                    </el-input>
                 </el-col>
                 <el-col :span="4">
                        <el-button type='primary' @click="addDialogVisible = true">添加用户</el-button>
                 </el-col>
            </el-row>
            <!-- 用户列表区域 -->
            <el-table :data="userList" border :stripe="true">
                <el-table-column type="index"></el-table-column>
                <el-table-column label="姓名" prop="name"></el-table-column>
                <el-table-column label="邮箱" prop="email"></el-table-column>
                <el-table-column label="电话" prop="phone"></el-table-column> 
                <el-table-column label="角色" prop="roler"></el-table-column> 
                <el-table-column label="状态">
                    <template v-slot="scope">
                         <el-switch v-model="scope.row.status" @change="userStatusChange(scope.row)" active-color="#13ce66" inactive-color="#ff4949"></el-switch> 
                    </template>
                </el-table-column> 
                <el-table-column label="操作" width="180px">
                    <template v-slot="scope">
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteUser(scope.row)"></el-button>
                         <el-tooltip class="item" effect="dark" content="分配角色" placement="top" :enterable="false">
                            <el-button type="warning" icon="el-icon-setting" size="mini" @click="setRoler(scope.row)"></el-button>
                         </el-tooltip>
                    </template>
                </el-table-column> 
            </el-table>

            <!-- 分页区域 -->
             <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[1, 2, 5, 10]"
                :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>

        <!-- 添加用户的提示框 -->
        <el-dialog
            title="添加用户" @close="addDialogClosed"
            :visible.sync="addDialogVisible"
            width="50%">
           <el-form ref="addFormRef" :model="addForm" :rules="addFormRules" label-width="80px"  status-icon>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="addForm.username"></el-input>
                </el-form-item>
                 <el-form-item label="密码" prop="password">
                    <el-input v-model="addForm.password" type="password"></el-input>
                </el-form-item>
                 <el-form-item label="邮箱" prop="email">
                    <el-input v-model="addForm.email"></el-input>
                </el-form-item>
                 <el-form-item label="手机" prop="phone">
                    <el-input v-model="addForm.phone"></el-input>
                </el-form-item>
           </el-form>    
            <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addUser">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 修改用户的对话框 -->
        <el-dialog  @close="editDialogClosed"
        title="修改用户"
        :visible.sync="editDialogVisible"
        width="50%">
        <el-form ref="editFormRef" :model="editForm" label-width="80px" :rules="editFormRules">
            <el-form-item label="用户名">
                <el-input v-model="editForm.username" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="editForm.email"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
                <el-input v-model="editForm.phone"></el-input>
            </el-form-item>
        </el-form>    
        <span slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editUser">确 定</el-button>
        </span>
        </el-dialog>
        <!-- 分配角色对话框 -->
        <el-dialog
        title="分配角色"
        :visible.sync="setRolerDialogVisible"
        width="50%"
        @close="setRolerColse">
       <div>
           <p>当前用户：{{userInfo.name}}</p>
           <p>当前角色：{{userInfo.roler}}</p>
           <p>
               分配角色：  
               <el-select v-model="selectRolerId" placeholder="请选择">
                    <el-option
                    v-for="item in rolersList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id">
                    </el-option>
                </el-select>
           </p>
       </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="setRolerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveRoler">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        //验证邮箱
        var checkEmail = (rule, value , cb) => {
            const regEmail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
            if(regEmail.test(value)) {
                return cb()
            }
            cb(new Error('请输入合法的邮箱'))
        }
        //验证手机号码
        var checkPhone = (rule, value , cb) => {
            const regPhone = /^1[3456789]\d{9}$/
            if(regPhone.test(value)) {
                return cb()
            }
            cb(new Error('请输入正确的手机号'))
        }
        return {
          //  获取用户列表的参数
            queryInfo: {
                query:'',
                pagenum:1,
                pagesize:2
            },
            total: 7,
            addForm:{
                username:'',
                password:'',
                email:'',
                phone:''
            },
            //添加表单验证
            addFormRules: {
                username:[ 
                    { required: true, message:'请输入用户名', trigger: 'blur' },
                    { min: 3, max: 10, message:'用户名字符长度为3~10',trigger: 'blur' }
                ],
                password:[
                    { required: true, message:'请输入密码', trigger: 'blur' },
                    { min: 3, max: 10, message:'密码字符长度为6~15',trigger: 'blur' }
                ],
                email:[
                    { required: true, message:'请输入邮箱', trigger: 'blur' },
                    { validator: checkEmail, trigger: 'blur' }
                ],
                phone:[
                    { required: true, message:'请输入手机号码', trigger: 'blur' },
                    { validator: checkPhone, trigger: 'blur' }
                ]
            },
            //修改用户表单验证
            editFormRules: {
                email:[
                    { required: true, message:'请输入邮箱', trigger: 'blur' },
                    { validator: checkEmail, trigger: 'blur' }
                ],
                phone:[
                    { required: true, message:'请输入手机号码', trigger: 'blur' },
                    { validator: checkPhone, trigger: 'blur' }
                ]
            },
            //添加用户对话框的显示与隐藏p
            addDialogVisible:false,
            //修改用户对话框的显示与隐藏
            editDialogVisible:false,
            //角色分配对话框的显示与隐,
            setRolerDialogVisible:false,
            //分配角色的用户信息
            userInfo:[],
            //可分配角色列表
            rolersList:[
                {id:1,label:'超级管理员'},
                {id:2,label:'低级管理员'},
                {id:3,label:'中级管理员'},
                {id:4,label:'高级管理员'},
            ],
            //已选中角色Id值
            selectRolerId:'',
            editForm: {
                username:'',
                email:'',
                phone:''
            },
            userList: [{
                name: '蔡徐坤',
                email: '1253548844@qq.com',
                phone:'182565998888',
                roler: '超级管理员',
                status:true
            }, {
                name: '吴亦凡',
                email: '1253548844@qq.com',
                phone:'182565998888',
                roler: '超级管理员',
                status:true
            }, {
                name: '鹿晗',
                email: '1253548844@qq.com',
                phone:'182565998888',
                roler: '超级管理员',
                status:true
            }, {
                name: '鸡你太美',
                email: '1253548844@qq.com',
                phone:'182565998888',
                roler: '超级管理员',
                status:true
            },
            {
                name: '王菊开',
                email: '1253548844@qq.com',
                phone:'182565998888',
                roler: '普通会员',
                status:false
            },
            ]
        }
    },
    created() {

    },
    methods: {
        getUserList() {
            // axios
        },
        //监听 pagesize 改变
        handleSizeChange(newSize){
           // console.log(newSize)
            this.queryInfo.pagesize = newSize;
        },
        handleCurrentChange(newPage){
           //console.log(newPage)
            if(newPage == 2){
                //console.log(newPage)
                this.userList = [{
                    name: '王猿',
                    email: '1253548844@qq.com',
                    phone:'182565998888',
                    roler: '普通会员',
                    status:false
                },{
               
                    name: '阴痒欠吸',
                    email: '1253548844@qq.com',
                    phone:'182565998888',
                    roler: '普通会员',
                    status:false
                },]
                
            }else if(newPage == 1){
                 this.userList= [{
                    name: '蔡徐坤',
                    email: '1253548844@qq.com',
                    phone:'182565998888',
                    roler: '超级管理员',
                    status:true
                }, {
                    name: '吴亦凡',
                    email: '1253548844@qq.com',
                    phone:'182565998888',
                    roler: '超级管理员',
                    status:true
                }, {
                    name: '鹿晗',
                    email: '1253548844@qq.com',
                    phone:'182565998888',
                    roler: '超级管理员',
                    status:true
                }, {
                    name: '鸡你太美',
                    email: '1253548844@qq.com',
                    phone:'182565998888',
                    roler: '超级管理员',
                    status:true
                },
                {
                    name: '王菊开',
                    email: '1253548844@qq.com',
                    phone:'182565998888',
                    roler: '普通会员',
                    status:false
                },
                ]
            }
            this.queryInfo.pagenum = newPage;
        },
        userStatusChange(status) {
            console.log(status)
            this.$message.success('更新用户状态成功')
        },
        search() {

        },
        addDialogClosed(){
            //重置表单
             this.$refs.addFormRef.resetFields();
        },
        editDialogClosed() {
            //重置表单
            this.$refs.editFormRef.resetFields();
        },
        //增加新用户
        addUser() {
            this.$refs.addFormRef.validate(valid => {
                if(!valid) return
                // axios请求
                this.$message.success('添加用户成功')
                this.addDialogVisible = false
            })
        },
        //编辑用户
        edit(data) {
            console.log(data)
            this.editDialogVisible = true;
            this.editForm = {
                username : data.name,
                email : data.email,
                phone : data.phone
            }
        },
        editUser() {
            this.$refs.editFormRef.validate(valid => {
                if(!valid) return
                //axios请求
                this.$message.success('修改用户成功')
                this.editDialogVisible = false
            })
        },
        deleteUser(data) {
            this.$confirm('是否删除此用户数据?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //axios请求
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        setRoler(roler) {
            //角色分配按钮
            this.userInfo = roler;
            this.setRolerDialogVisible = true;
        },
        saveRoler() {
            if(!this.selectRolerId){
               return  this.$message.error('请选择分配的角色')
            }
            this.$message.success('分配角色成功')
            this.setRolerDialogVisible = false;
        },
        setRolerColse() {
            this.selectRolerId = '';
        }
    }
}
</script>
<style lang="less" scoped>

</style>